
import React, { useRef, useState } from 'react'
import { Button, Swiper, Toast, Grid,Tag } from 'antd-mobile'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
// import {
//   AppOutline,
//   MessageOutline,
//   MessageFill,
//   UnorderedListOutline,
//   UserOutline,
// } from 'antd-mobile-icons'
import "@/css/homeIndex.module.css"
import homeStyles from "@/css/homeIndex.module.css"
import { Navigate, useNavigate } from 'react-router-dom';

const Home=()=>{
    const [activeKey, setActiveKey] = useState('todo');
    const [num,setNum]=useState(0);
   
    const navigate= useNavigate()
    const colors = ['#fff', '#fff', '#fff'];
   
  
  
    const items = colors.map((color, index) => (
      <Swiper.Item key={index}>
        <div
          className="content"
          style={{ background: color }}
          onClick={() => {
            Toast.show(`你点击了卡片 ${index + 1}`)
          }}
        >
          <img src={require(`@/assets/imgs/swaiper${index + 1}.png`)} alt='' style={{ width: "100%" }} />
        </div>
      </Swiper.Item>
    ));
  
  
  
    const ref = useRef(null)

    return <>
         <div>
                
                  {/* <Swiper autoplay loop>{items}</Swiper> */}

      <div className={homeStyles["mianContent"]}>
        <div className={homeStyles["nav"]}>
          <Grid columns={2} gap={4}>
            <Grid.Item>
              <div className={homeStyles["nav-item"]}>
                <div>A</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={homeStyles["nav-item"]}>B</div>
            </Grid.Item>
            <Grid.Item>
              <div className={homeStyles["nav-item"]}>C</div>       
            </Grid.Item>
            <Grid.Item>
              <div className={homeStyles["nav-item"]}>D</div>
            </Grid.Item>
          </Grid>
        </div>

        <div className="shopList">
          <Grid columns={2} gap={4}>
            <Grid.Item>
              <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/swaiper${1}.png`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>2斤±0.2斤 | 新苗螺丝椒</p>
                    <p className='shop-explain'>96.5%好评 | 新鲜采摘品质保障</p>
                    <div>
                      <Tag color='danger' fill='outline'>
                        直降0.5元·限2份
                      </Tag>
                      <Tag color='#666' fill='outline' style={{ marginLeft: 5 }}>
                        1.4万人购
                      </Tag>
                    </div>
                    <div className={homeStyles['shop-price']}>
                       <span>卷后￥</span><span>3.99</span>
                    </div>
                    <div className={homeStyles['shop-btn']}>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div>
                  </div>
                </div>
              </div>
            </Grid.Item>
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/swaiper${1}.png`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>2斤±0.2斤 | 新苗螺丝椒</p>
                    <p className='shop-explain'>96.5%好评 | 新鲜采摘品质保障</p>
                    <div>
                      <Tag color='danger' fill='outline'>
                        直降0.5元·限2份
                      </Tag>
                      <Tag color='#666' fill='outline' style={{ marginLeft: 5 }}>
                        1.4万人购
                      </Tag>
                    </div>
                    <div className={homeStyles['shop-price']}>
                       <span>卷后￥</span><span>3.99</span>
                    </div>
                    <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div>
                  </div>
                </div>
              </div>
            </Grid.Item>
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/swaiper${1}.png`)} alt='' className='shop-img' />
                  <div className={homeStyles['shop-detail']}>
                    <p className='shop-name'>2斤±0.2斤 | 新苗螺丝椒</p>
                    <p className='shop-explain'>96.5%好评 | 新鲜采摘品质保障</p>
                    <div>
                      <Tag color='danger' fill='outline'>
                        直降0.5元·限2份
                      </Tag>
                      <Tag color='#666' fill='outline' style={{ marginLeft: 5 }}>
                        1.4万人购
                      </Tag>
                    </div>
                    <div className={homeStyles['shop-price']}>
                       <span>卷后￥</span><span>3.99</span>
                    </div>
                    <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div>
                  </div>
                </div>
              </div>
            </Grid.Item>
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/swaiper${1}.png`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>2斤±0.2斤 | 新苗螺丝椒</p>
                    <p className='shop-explain'>96.5%好评 | 新鲜采摘品质保障</p>
                    <div>
                      <Tag color='danger' fill='outline'>
                        直降0.5元·限2份
                      </Tag>
                      <Tag color='#666' fill='outline' style={{ marginLeft: 5 }}>
                        1.4万人购
                      </Tag>
                    </div>
                    <div className='shop-price'>
                       <span>卷后￥</span><span>3.99</span>
                    </div>
                    <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div>
                  </div>
                </div>
              </div>
            </Grid.Item>
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>2斤±0.2斤 | 新苗螺丝椒</p>
                    <p className='shop-explain'>96.5%好评 | 新鲜采摘品质保障</p>
                    <div>
                      <Tag color='danger' fill='outline'>
                        直降0.5元·限2份
                      </Tag>
                      <Tag color='#9ca3af' fill='outline' style={{ marginLeft: 5 }}>
                        1.4万人购
                      </Tag>
                    </div>
                    <div className='shop-price'>
                       <span>卷后￥</span><span>3.99</span>
                    </div>
                    <div className='shop-btn'>
                      {num==0 && <Button shape='rounded' color='danger' size='mini' onClick={()=>setNum(num+1)}>立即加购</Button>}
                      {num>=1&& <div className='icon-gou'>
                     <span className='iconfont icon-jian iconsize' onClick={()=>setNum(num-1)}></span> 
                     <span className='shopNum'>{num}</span>  
                     <span className='iconfont icon-jiahao iconsize' onClick={()=>setNum(num+1)}></span>
                    </div>}
                    </div>
                  </div>
                </div>
              </div>
            </Grid.Item>
          </Grid>
        </div>


      </div>
     


         </div>
    </>
}

export default Home